<template>
  <div>
    <div class="header-search-box shadow">
      <sec-form
        :searchBox="{ span: 16 }"
        :span="8"
        :ruleForm="searchForm.data"
        :formData="searchForm.config"
        @reset="getTableList(true)"
        @submitForm="getTableList(true)"
      >
      </sec-form>
    </div>
    <div class="scene-main tab-scene-main">
      <div class="new-file">
        <el-button type="primary" @click="handleNew">发起咨询</el-button>
      </div>
      <sec-table :tableData="searchTable.rows" :tableCol="searchTable.cols" ref="secTabel"> </sec-table>

      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="page"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="diaShow" width="60%">
      <sec-form
        ref="opForm"
        :loadingProp="opForm.loadingProp"
        :optionData="opForm.optionData"
        :ruleForm="opForm.ruleForm"
        :formData="opForm.formData"
        :rules="opForm.rules"
      ></sec-form>
    </el-dialog>
  </div>
</template>

<script>
import { paginationMixin } from "common/js/mixin";
import { MessageBox } from "element-ui";
import { consultListApi, consultDeleteApi, consultSaveApi } from "api/consultApi";
import { userApi } from "api/evaluateApi";

export default {
  name: "evaluate",
  props: {},
  mixins: [paginationMixin],
  components: {},
  data() {
    return {
      status: "",
      diaShow: false,
      title: "",
      searchForm: {
        data: {
          consultName: "",
        },
        config: [
          {
            type: "text",
            label: "咨询名称",
            prop: "consultName",
          },
        ],
      },
      searchTable: {
        cols: [
          { label: "咨询名称", prop: "consultName" },
          { label: "操作人", prop: "operator" },
          {
            label: "操作时间",
            prop: "modifyTime",
          },

          {
            label: "操作",
            prop: "operation",
            width: 150,
            children: [
              {
                title: "详情",
                click: ({ row }) => {
                  if (!row.answeredFlag) {
                    MessageBox.confirm("你暂未填写任何咨询信息，请先点击”去咨询“填写咨询内容", "提示", {
                      confirmButtonText: "去咨询",
                      type: "warning",
                      showCancelButton: false,
                    }).then(() => {
                      this.utils.$router({ path: "/consult/config", query: { consultId: row.id } });
                    });
                  } else {
                    this.$router.push({
                      name: "consultDetail",
                      query: { id: row.id, assetId: row.assetId, tab: "tab1" },
                    });
                  }
                },
              },
              {
                title: "编辑",
                click: ({ row }) => {
                  this.diaShow = true;
                  this.title = "编辑";
                  row.noticeUsers = row.noticeUsers?.split(",");
                  this.opForm.ruleForm = { ...row };
                  console.log(this.opForm.ruleForm);
                },
              },
              {
                title: "删除",
                click: ({ row }) => {
                  console.log(row);
                  this.utils.$confirm(() => {
                    consultDeleteApi({ id: row.id, version: row.version }).then((res) => {
                      this.message.state(res);
                      this.getTableList();
                    });
                  });
                },
              },
            ],
          },
        ],
        rows: [{ consultName: 11 }],
      },
      opForm: {
        ruleForm: {
          consultName: "",
          remark: "",
          noticeUsers: [],
        },
        rules: {
          consultName: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        loadingProp: {
          save: false,
          noticeUsers: false,
        },
        optionData: {
          noticeUsers: [],
        },
        formData: [
          {
            type: "text",
            label: "咨询名称",
            maxlength: 50,
            prop: "consultName",
          },
          {
            label: "关注人",
            prop: "noticeUsers",
            type: "select",
            multiple: true,
            filterable: true,
            remote: true,
            optionProps: { label: "name", value: "account" },
            remoteMethod: (query) => {
              this.opForm.loadingProp.noticeUsers = true;
              userApi({ account: query }).then((res) => {
                this.opForm.loadingProp.noticeUsers = false;
                this.opForm.optionData.noticeUsers = res.data;
              });
            },
          },
          {
            type: "textarea",
            label: "备注",
            prop: "remark",
          },
          {
            type: "operation",
            style: { "text-align": "right" },
            children: [
              {
                label: "保存并咨询",
                type: "primary",
                prop: "save",
                click: () => {
                  if (this.$refs.opForm.submitForm()) {
                    this.opForm.loadingProp.save = true;
                    let { id, consultName, remark, version, noticeUsers } = this.opForm.ruleForm;

                    consultSaveApi({
                      id: id || "",
                      consultName: consultName,
                      remark: remark,
                      noticeUsers: noticeUsers?.join(","),
                      version: version || "",
                    }).then((res) => {
                      this.opForm.loadingProp.save = false;
                      if (res.code != 0) {
                        this.message.warning({ message: res.msg });
                        return;
                      }
                      this.utils.$router({ path: "/consult/config", query: { consultId: res.data } });
                    });
                  }
                },
              },
              {
                label: "取消",
                click: () => {
                  this.diaShow = false;
                },
              },
            ],
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    this.getTableList();
  },
  methods: {
    getTableList(paginationReset) {
      if (paginationReset) {
        this.paginationReset();
      }
      let loading = this.openLoading();
      consultListApi({
        pageNum: this.page,
        pageSize: this.pageSize,
        consultName: this.searchForm.data.consultName,
      }).then((res) => {
        loading.close();
        this.searchTable.loading = false;
        this.totalSize = res.count;
        this.searchTable.rows = res.data;
      });
    },
    handleNew() {
      this.title = "发起咨询";
      this.diaShow = true;
      this.$nextTick(() => {
        this.$refs.opForm.resetForm();
        this.opForm.ruleForm.consultName = "";
        this.opForm.ruleForm.remark = "";
        this.opForm.ruleForm.noticeUsers = [];
      });
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getTableList();
    },
    currentChange(val) {
      this.page = val;
      this.getTableList();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
